<template>
	<div class="upgrade">
    <div class="upgrade-top">
      <div
        v-for="(item, index) in topMenu"
        :class="item.active ? 'active': ''"
        @click="handleClickTab(item, index)"
        :key="index"
        class="upgrade-top-item">
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="upgrade-wrap">
      <div class="upgrade-wrap-tit"><span class="txt">硬性条件</span><span class="tips">下列条件必须都满足呦~</span></div>
      <div
        v-for="(item, index) in menuConditionAnd"
        :key="index"
        class="upgrade-wrap-con">
        <div class="upgrade-wrap-con-tit">{{ item.title }}</div>
        <div class="upgrade-wrap-con-item">
          <div class="box">
            <div class="price">{{ item.my_value }}</div>
            <div class="text">当前</div>
          </div>
          <div class="box">
            <div class="price">{{ item.need_value }}</div>
            <div class="text">目标</div>
          </div>
        </div>
      </div>
      <div v-if="!menuConditionAnd.length">
        <no-data :noData="noData"></no-data>
      </div>
    </div>
    
    <div class="upgrade-wrap">
      <div class="upgrade-wrap-tit"><span class="txt">选择条件</span><span class="tips">下列条件满足其中之一就可以呦~</span></div>
      <div
        v-for="(item, index) in menuConditionOr"
        :key="index"
        class="upgrade-wrap-con">
        <div class="upgrade-wrap-con-tit">{{ item.title }}</div>
        <div class="upgrade-wrap-con-item">
          <div class="box">
            <div class="price">{{ item.my_value }}</div>
            <div class="text">当前</div>
          </div>
          <div class="box">
            <div class="price">{{ item.need_value }}</div>
            <div class="text">目标</div>
          </div>
        </div>
      </div>
      <div v-if="!menuConditionOr.length">
        <no-data :noData="noData"></no-data>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-20 17:10:31
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2019-12-20 17:10:35
   */
  import Vue from 'vue'
  import noData from '@/components/noData/index'
  import { dlsUpgradeCondition } from '@/api/user/member/memberApi'
  export default Vue.extend({
    name: 'index',
    components: {
      noData
    },
    data() {
      return {
        noData: {
          width: '214px',
          img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-data.png',
          text: '暂无数据',
          txtMarginTop: '-30px',
          marginTop: '0'
        },
        topMenu: [],
        menuConditionOr: [],
        menuConditionAnd: [],
        postData: {
          upgrade_rank: ''
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      /**
       * 初始化
       */
      init() {
        this.dlsUpgradeConditionFn('default')
      },
      /**
       * tab切换
       */
      handleClickTab(param, index) {
        this.topMenu.forEach((item, num) => {
          this.$set(this.topMenu[num], 'active', false)
        })
        this.$set(this.topMenu[index], 'active', true)
        this.postData.upgrade_rank = param.rank
        this.dlsUpgradeConditionFn()
      },
      /**
       * 获取代理商升级数据
       */
      dlsUpgradeConditionFn(data) {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        dlsUpgradeCondition(this.postData).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            if (data == 'default') {
              const menu = res.data.menu
              menu.forEach(item => {
                item.active = false
              })
              menu[0].active = true
              this.topMenu = menu
            }
            this.menuConditionOr = res.data.menu_condition.or
            this.menuConditionAnd = res.data.menu_condition.and
          } else {
            this.$Error(res.msg)
          }
        })
      }
    }
  })
</script>

<style lang="scss">
  .upgrade{
    &-top{
      display: flex;
      &-item{
        flex: 1;
        text-align: center;
        font-size: 28px;
        height: 100px;
        line-height: 100px;
        background: #fff;
        span{
          display: inline-block;
          position: relative;
          height: 100%;
          &:after{
            content: '';
            display: none;
            width: 80%;
            height: 5px;
            background: linear-gradient(to left, #F20B22, rgba(242, 11, 34, 0.2));
            position: absolute;
            bottom: 16px;
            left: 10%;
          }
        }
        &.active{
          font-size: 32px;
          color: #000;
          span{
            &:after{
              display: inline-block;
            }
          }
        }
      }
    }
    &-wrap{
      margin-top: 20px;
      background: #fff;
      &-tit{
        padding: 32px 0;
        border-bottom: 1px solid #f1f1f1;
        .txt{
          margin-left: 30px;
          border-left: 5px solid #F30C23;
          padding-left: 10px;
          font-size: 27px;
          color: #333;
        }
        .tips{
          font-size: 24px;
          color: #999999;
          margin-left: 20px;
        }
      }
      &-con{
        padding: 30px;
        &-tit{
          font-size: 27px;
          color: #333;
        }
        &-item{
          margin-top: 30px;
          padding: 0 20px;
          .box{
            display: inline-block;
            width: 270px;
            height: 136px;
            text-align: center;
            border-radius: 10px;
            background: #F7F7F7;
            .price{
              margin-top: 30px;
              font-size: 32px;
              color: #F30C23;
            }
            .text{
              margin-top: 15px;
              font-size: 26px;
              color: #999999;
            }
            &:nth-child(2n){
              float: right;
              .price{
                color: #333;
              }
            }
          }
        }
      }
    }
  }
</style>
